<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>添加用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon"
          href="https://cdn.jsdelivr.net/gh/Fuukei/Public_Repository@latest/vision/basic/favicon.ico">
    <link rel="stylesheet" th:href="@{/css/mouse.css}">
    <link rel="stylesheet" th:href="@{/js/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <script type="text/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" id="username" lay-verify="required|text" lay-reqtext="用户名是唯一的！"
                   placeholder="请输入唯一的用户名"
                   value=""
                   class="layui-input">
            <tip>用户名是唯一的！</tip>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="email" id="email"
                   placeholder="请输入唯一的邮箱"
                   value=""
                   class="layui-input">
            <tip>填写的邮箱必须是唯一的（但是可以有特权）!</tip>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" lay-verify="required|text" lay-reqtext="密码很重要!" placeholder="请输入加密后的密码"
                   value=""
                   class="layui-input">
            <tip>注意密码一定要是加密后的!</tip>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">权限</label>
        <div class="layui-input-block">
            <input type="checkbox" name="authority" lay-skin="switch" lay-text="超级|普通" checked=""
                   lay-filter="authority">
            <!--            <tip>权限很重要！</tip>-->
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <input type="text" name="remarks" placeholder="请输入备注" value=""
                   class="layui-input">
            <tip>备注并不是必须填写的</tip>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">注册时间</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="registertime" id="registertime" lay-verify="required"
                   lay-reqtext="注册时间别忘了"
                   placeholder="yyyy-MM-dd HH:mm:ss">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script th:src="@{/js/layui-v2.6.3/layui.js}" charset="utf-8"></script>

<script>
    $(document).on('input', '#username', function () {
        let username = $("#username").val();
        $.ajax({
            url: "/api/usernamejudge",
            type: "GET",
            data: {username: username},
            success: function (data) {
                if (data) {
                    layer.alert("此用户名已被注册！", {title: "重点提示"});
                    $("#username").val("");
                }
            }
        });
    });
    $(document).on('input', '#email', function () {
        let email = $("#email").val();
        $.ajax({
            url: "/api/emailjudge",
            type: "GET",
            data: {email: email},
            success: function (data) {
                if (!data) {
                    layer.alert("此邮箱已注册！", {title: "重点提示"});
                    $("#email").val("");
                }
            }
        });
    });
</script>

<script>
    // 校验邮箱格式
    function isEmail(str) {
        var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
        return reg.test(str);
    }

    layui.use(['form', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#registertime'
            , type: 'datetime'
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            data.field.authority === "on" ? (data.field.authority = 1) : (data.field.authority = 0);
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息',
                icon: 1
            }, function (index) {

                if (data.field.email !== "" && !isEmail(data.field.email)) {
                    layer.msg("请输入正确的邮箱！", {icon: 2, time: 800}, function () {
                        $("#email").val("");
                    });
                } else {
                    $.ajax({
                        url: '/twei/toadduser',
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(data.field),
                        success: function (data) {
                            layer.msg(data.msg, {icon: 1, time: 800}, function () {
                                var iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);
                            });
                            if (data.code === 200) {
                                layer.close(index);
                            }
                        }
                    });
                }
            });
            return false;
        });
    });
</script>
</body>
</html>